{% extends "pc/template.html" %}

{% block title %}登录 - BlackWidow{% endblock %}

{% include 'pc/公共样式配置/CSS总样式.html' %}

{% block css %}
<style>
    .login-container {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f5f5f9;
    }

    .login-card {
        width: 100%;
        max-width: 400px;
        padding: 2rem;
        border-radius: 0.5rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        background-color: #fff;
    }

    .login-title {
        text-align: center;
        margin-bottom: 2rem;
        color: #566a7f;
    }

    .version-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
        vertical-align: middle;
        background-color: #e7e7ff !important;
        color: #696cff !important;
    }

    .form-floating {
        margin-bottom: 1rem;
    }

    .btn-primary {
        width: 100%;
        padding: 0.75rem;
        margin-bottom: 1rem;
    }

    .social-login {
        text-align: center;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid #d9dee3;
    }

    .social-login-title {
        color: #566a7f;
        margin-bottom: 1rem;
        font-size: 0.875rem;
    }

    .social-icons {
        display: flex;
        justify-content: center;
        gap: 2rem;
    }

    .social-icon {
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .social-icon:hover {
        transform: translateY(-2px);
    }

    .social-icon i {
        font-size: 28px;
    }

    /* 不同登录方式的颜色 */
    .social-icon.wechat i {
        color: #07C160;
    }

    .social-icon.phone i {
        color: #1890ff;
    }

    .social-icon.email i {
        color: #722ed1;
    }

    .social-icon.weibo i {
        color: #e6162d;
    }

    /* 悬停效果 */
    .social-icon.wechat:hover i {
        color: #06ae56;
    }

    .social-icon.phone:hover i {
        color: #096dd9;
    }

    .social-icon.email:hover i {
        color: #531dab;
    }

    .social-icon.weibo:hover i {
        color: #c41d1f;
    }
</style>
{% endblock %}

{% block content %}
<div class="login-container">
    <div class="login-card">
        <h2 class="login-title">欢迎登录 <span class="badge version-badge">v2.0</span></h2>
        <form id="loginForm">
            <div class="form-floating">
                <input type="text" class="form-control" id="account" placeholder="用户名(6-11位数字)" required>
                <label for="account">账号</label>
            </div>
            <div class="form-floating">
                <input type="password" class="form-control" id="password" placeholder="(用户密码只能存在6-12位)" required>
                <label for="password">密码</label>
            </div>
            <button type="submit" class="btn btn-primary">登录</button>
            <div class="text-center text-muted">
                <small>首次登录将自动注册账号</small>
            </div>
        </form>

        <div class="social-login d-none">
            <p class="social-login-title">其他登录方式</p>
            <div class="social-icons">
                <div class="social-icon wechat " title="微信登录">
                    <i class="iconfont icon-shejiaotubiao-01"></i>
                </div>

            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>

    document.getElementById('loginForm').addEventListener('submit', function (e) {
        e.preventDefault();
        showLoading('登录中...');


        // 获取地址栏的参数
        const urlParams = new URLSearchParams(window.location.search);
        const redirect = urlParams.get('redirect');
        // 如果 redirect 不存在或者不是一个base64加密的值就关闭当前标签页
        if (!redirect || !isBase64(redirect)) {
            window.close();
        }
        // 解密
        const redirectUrl = decrypt(redirect);



        // 获取登录信息
        const account = document.getElementById('account').value;
        const password = document.getElementById('password').value;

        // TODO: 实现登录逻辑
        console.log('登录信息:', { account, password });

        // 调用登录接口
        axios({
            url: '/api/platform_user/v2/create/',
            method: 'POST',
            data: {
                account,
                password,
                redirect: redirectUrl,
            }
        }).then(res => {
            if (res.status == 200) {
                console.log(res.data);

                if (res.data.code == 0) {
                    showToast("认证成功", 'success');
                    setTimeout(() => {
                        // 关闭当前标签页
                        window.opener = null;
                    }, 1000);
                } else {
                    // 如果注册失败就切换登录接口
                    axios({
                        url: "/api/platform_user/v2/get_platform_user_by_account_and_password/",
                        method: 'POST',
                        data: {
                            account,
                            password,
                            redirect: redirectUrl,
                        }
                    }).then(res => {
                        if (res.status == 200) {
                            showToast(res.data.msg, 'success');
                           if (res.data.code == 0) {
                            setTimeout(() => {
                                // 关闭当前标签页
                                window.opener = null;
                            }, 1000);
                           } else {
                            console.log(res.data);
                            
                           }
                        } else {
                            showToast(res.data.message, 'error');
                        }
                    }).catch(err => {
                        console.log(err);
                        showToast(err.response.data.message, 'error');
                    }).finally(() => {
                        hideLoading();
                    })
                }
            } else {
                showToast(res.data.message, 'error');
            }
        }).catch(err => {
            console.log(err);
            showToast(err.response.data.message, 'error');
        }).finally(() => {
            hideLoading();
        })
    });

    // 社交登录点击事件
    document.querySelectorAll('.social-icon').forEach(icon => {
        icon.addEventListener('click', function () {
            const type = this.classList[1]; // wechat, phone, email, weibo
            // TODO: 实现对应的登录逻辑
            console.log(`${type}登录`);
        });
    });
</script>
{% endblock %}

{% block nav_left %}

<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
    <div class="app-brand demo">
        <a href="javascript:void(0);" class="app-brand-link">
            <span class="app-brand-logo demo">
                <svg width="25" viewBox="0 0 25 42" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink">
                    <defs>
                        <path
                            d="M13.7918663,0.358365126 L3.39788168,7.44174259 C0.566865006,9.69408886 -0.379795268,12.4788597 0.557900856,15.7960551 C0.68998853,16.2305145 1.09562888,17.7872135 3.12357076,19.2293357 C3.8146334,19.7207684 5.32369333,20.3834223 7.65075054,21.2172976 L7.59773219,21.2525164 L2.63468769,24.5493413 C0.445452254,26.3002124 0.0884951797,28.5083815 1.56381646,31.1738486 C2.83770406,32.8170431 5.20850219,33.2640127 7.09180128,32.5391577 C8.347334,32.0559211 11.4559176,30.0011079 16.4175519,26.3747182 C18.0338572,24.4997857 18.6973423,22.4544883 18.4080071,20.2388261 C17.963753,17.5346866 16.1776345,15.5799961 13.0496516,14.3747546 L10.9194936,13.4715819 L18.6192054,7.984237 L13.7918663,0.358365126 Z"
                            id="path-1"></path>
                        <path
                            d="M5.47320593,6.00457225 C4.05321814,8.216144 4.36334763,10.0722806 6.40359441,11.5729822 C8.61520715,12.571656 10.0999176,13.2171421 10.8577257,13.5094407 L15.5088241,14.433041 L18.6192054,7.984237 C15.5364148,3.11535317 13.9273018,0.573395879 13.7918663,0.358365126 C13.5790555,0.511491653 10.8061687,2.3935607 5.47320593,6.00457225 Z"
                            id="path-3"></path>
                        <path
                            d="M7.50063644,21.2294429 L12.3234468,23.3159332 C14.1688022,24.7579751 14.397098,26.4880487 13.008334,28.506154 C11.6195701,30.5242593 10.3099883,31.790241 9.07958868,32.3040991 C5.78142938,33.4346997 4.13234973,34 4.13234973,34 C4.13234973,34 2.75489982,33.0538207 2.37032616e-14,31.1614621 C-0.55822714,27.8186216 -0.55822714,26.0572515 -4.05231404e-15,25.8773518 C0.83734071,25.6075023 2.77988457,22.8248993 3.3049379,22.52991 C3.65497346,22.3332504 5.05353963,21.8997614 7.50063644,21.2294429 Z"
                            id="path-4"></path>
                        <path
                            d="M20.6,7.13333333 L25.6,13.8 C26.2627417,14.6836556 26.0836556,15.9372583 25.2,16.6 C24.8538077,16.8596443 24.4327404,17 24,17 L14,17 C12.8954305,17 12,16.1045695 12,15 C12,14.5672596 12.1403557,14.1461923 12.4,13.8 L17.4,7.13333333 C18.0627417,6.24967773 19.3163444,6.07059163 20.2,6.73333333 C20.3516113,6.84704183 20.4862915,6.981722 20.6,7.13333333 Z"
                            id="path-5"></path>
                    </defs>
                    <g id="g-app-brand" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g id="Brand-Logo" transform="translate(-27.000000, -15.000000)">
                            <g id="Icon" transform="translate(27.000000, 15.000000)">
                                <g id="Mask" transform="translate(0.000000, 8.000000)">
                                    <mask id="mask-2" fill="white">
                                        <use xlink:href="#path-1"></use>
                                    </mask>
                                    <use fill="#696cff" xlink:href="#path-1"></use>
                                    <g id="Path-3" mask="url(#mask-2)">
                                        <use fill="#696cff" xlink:href="#path-3"></use>
                                        <use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-3"></use>
                                    </g>
                                    <g id="Path-4" mask="url(#mask-2)">
                                        <use fill="#696cff" xlink:href="#path-4"></use>
                                        <use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-4"></use>
                                    </g>
                                </g>
                                <g id="Triangle"
                                    transform="translate(19.000000, 11.000000) rotate(-300.000000) translate(-19.000000, -11.000000) ">
                                    <use fill="#696cff" xlink:href="#path-5"></use>
                                    <use fill-opacity="0.2" fill="#FFFFFF" xlink:href="#path-5"></use>
                                </g>
                            </g>
                        </g>
                    </g>
                </svg>
            </span>
            <span class="app-brand-text demo menu-text fw-bold ms-2">统一认证中心</span>
        </a>

        <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">
            <i class="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
        </a>
    </div>

    <div class="menu-inner-shadow"></div>

    <ul class="menu-inner py-1">
        <!-- <li class="menu-item">
            <a href="javascript:void(0);" class="menu-link">
                <i class="menu-icon tf-icons bx bx-support"></i>
                <div class="text-truncate" data-i18n="Support">开发者微信</div>
            </a>
        </li> - -->

        <!-- 仪表盘 -->
        <!-- <li class="menu-item {% if '/web/home/' in request.path %}active open{% endif %}">
            <a href="javascript:void(0);" class="menu-link menu-toggle">
                <i class="menu-icon tf-icons bx bx-home-smile"></i>
                <div class="text-truncate" data-i18n="Dashboards">仪表盘</div>
                <span class="badge rounded-pill bg-danger ms-auto">5</span>
            </a>
            <ul class="menu-sub">
                <li class="menu-item {% if request.path in '/web/home/index/' %}active{% endif %}">
                    <a href="/web/home/index/" class="menu-link">
                        <div class="text-truncate" data-i18n="Analytics">首页</div>
                        <div class="badge rounded-pill bg-label-primary text-uppercase fs-tiny ms-auto">专业版</div>
                    </a>
                </li>
              

            </ul>
        </li> -->


        <!-- <li class="menu-item">
        <a
          href=""
          target="_blank"
          class="menu-link">
          <i class="menu-icon tf-icons bx bx-support"></i>
          <div class="text-truncate" data-i18n="Support">客服</div>
        </a>
      </li> -->

        <li class="menu-item">
    </ul>
</aside>
{% endblock %}

{% block NavBar %}
{% endblock %}

{% include 'pc/公共样式配置/JS总样式.html' %}

{% block footer %}
{% include "pc/components/Footer.html" %}
{% endblock %}